<template>
    <div>
        <el-page-header @back="goBack" :content="pageTitle"></el-page-header>
        <div class="common_line"></div>
        <el-form ref="addForm" :model="addForm" :rules="rules" label-width="auto" style="margin-top: 20px;width: 85%;">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="名称:" prop="name">
                        <el-input style="width: 240px" v-model="addForm.name" placeholder="请输入" maxlength="20" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="简称:">
                        <el-input style="width: 240px" v-model="addForm.abbr_name" placeholder="请输入" maxlength="20" clearable></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="分类:" prop="category">
                        <div style="display: flex;align-items: center;gap: 20px;">
                            <el-select style="width: 240px;" v-model="addForm.category" placeholder="请选择" clearable>
                                <el-option v-for="item in cateLists" :key="'cate_'+item.id" 
                                    :label="item.name" :value="item.id"></el-option>
                            </el-select>
                            <span @click="showAddCateAlert=true" style="cursor: pointer;font-size: 13px;color: #0099ff;">新增分类</span>
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系人:">
                        <el-input style="width: 240px" v-model="addForm.contact" placeholder="请输入" maxlength="20" clearable></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="联系电话:">
                        <el-input style="width: 240px" v-model="addForm.phone" placeholder="请输入" maxlength="20" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="邮箱:">
                        <el-input style="width: 240px" v-model="addForm.email" placeholder="请输入" maxlength="50" clearable></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="微信:">
                        <el-input style="width: 240px" v-model="addForm.wechat" placeholder="请输入" maxlength="50" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="地址:">
                        <el-input style="width: 240px" v-model="addForm.addr" placeholder="请输入" maxlength="100" clearable></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="期初欠款:">
                        <el-input v-if="!supplierId" style="width: 240px" @blur="moneyBlur" v-model="addForm.initial_money" placeholder="请输入" maxlength="50" clearable></el-input>
                        <span v-else>{{ "￥"+addForm.initial_money }}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="应付款:">
                        <span>{{ "￥"+addForm.current_money }}</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="20">
                    <el-form-item label="备注:">
                        <el-input maxlength="200" show-word-limit type="textarea" :autosize="{ minRows: 2, maxRows: 6 }" v-model="addForm.remark" placeholder="请输入" clearable />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <bottom-btns
            Width="70%"
            MarginTop="30px"
            :buttons="buttonList"
            @superBtnClick="handleButtonClick"
        ></bottom-btns>

        <el-dialog
            title="新增供货商分类"
            :visible.sync="showAddCateAlert"
            width="30%"
            :close-on-click-modal="false"
            append-to-body
            center>
            <div style="padding-left: 20px;">
                <el-form :model="cateInfo" label-width="auto" ref="cateForm" :rules="cateRules">
                    <el-form-item label="分类名称:" prop="name">
                        <el-input style="width: 240px;" maxlength="100" v-model="cateInfo.name" placeholder="请输入" clearable />
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="showAddCateAlert=false">取 消</el-button>
                <el-button size="small" class="btn_primary_color" @click="addSupplierCategory">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getSupplierCates, infoSupplier, addSupplier, editSupplier, addSupplierCate } from "@/api/cooperate";
import bottomBtns from "@/components/bottomBtns";

export default {
    name: 'supplierEdit',
    components: {
        bottomBtns
    },
    data() {
        return {
            showAddCateAlert: false,
            supplierId: '',
            pageTitle: '',
            backShouldRefresh: false,  //返回是否刷新分类
            addForm: {
				corp: '',
                category: '', 
                name: '',
                abbr_name: '',
                current_money: 0,
                initial_money: 0,
                addr: '',
                contact: '',
                phone: '',
                email: '',
                wechat: '',
                remark: ''
            },
            rules:{
                name: [
                    { required: true, message: "请输入供货商名称", trigger: "blur" },
                ],
                category: [
                    { required: true, message: "请选择供货商分类", trigger: "change" },
                ],
            },
            cateInfo: {
                name: ''
            },
            cateRules:{
                name: [
                    { required: true, message: "请输入分类名称", trigger: "blur" },
                ],
            },
            cateLists: [],
            buttonList: [
                { name: '保存', type: 'commit', id:'1' },
                { name: '取消', type: 'cancel', id:'2' }
            ]
        }
    },
    props: {
        corpId: {
            type: Number
        },
        editId: {
            type: Number
        }
    },
    mounted() {
        this.addForm.corp = this.corpId
        this.supplierId = this.editId
        if (this.supplierId) {
            this.pageTitle = '编辑供货商'
            this.getSupplierInfo()
        }else{
            this.pageTitle = '新增供货商'
        }
        this.getCategorys()
    },
    methods: {
        goBack() {
            this.$emit('hidden', {isRefresh: this.backShouldRefresh})
        },
        moneyBlur(val) {
            let value = val.target.value
            value = value.replace(/^(?!-)([^-\d.])/g, ''); // 只允许负号、数字和小数点
            const parts = value.split('.');
            if (parts.length > 2) {
                value = parts[0] + '.' + parts.slice(1).join(''); // 只取第一个小数点之前的部分
            }
            this.addForm.initial_money = value ? parseFloat(value) : 0
            this.addForm.current_money = this.addForm.initial_money
        },
        // 获取供货商分类
        getCategorys() {
            getSupplierCates({
                corp: this.addForm.corp,
                page: 1,
                num: 999
            }).then(res => {
                this.cateLists = res.data.data.category_list
            })
        },
        addSupplierCategory() {
            var that = this
            that.$refs['cateForm'].validate(valid => {
                if(!valid) return

                addSupplierCate({
                    corp: that.addForm.corp,
                    name: that.cateInfo.name
                }).then(res => {
                    if (res.code == 200){
                        that.cateInfo.name = ''
                        that.cateInfo.id = ''
                        that.getCategorys()
                        that.showAddCateAlert = false
                        that.backShouldRefresh = true
                        that.$message({
                            message: '新增成功',
                            type: 'success'
                        })
                    }
                })
            })
        },
        // 获取供货商信息
        getSupplierInfo() {
            infoSupplier(this.supplierId, {corp: this.addForm.corp}).then(res => {
                this.addForm = res.data.data
            })
        },
        handleButtonClick(item) {
            switch (item.id) {
                case '1':   // 保存
                    this.commit()
                    break;
                case '2':   // 取消
                    this.goBack()
                    break;
            
                default:
                    break;
            }
        },
        commit() {
            var that = this
            that.$refs['addForm'].validate(valid => {
                if(!valid) return

                let temp = null
                if (that.supplierId) {
                    temp = editSupplier(that.supplierId, that.addForm)
                }else{
                    temp = addSupplier(that.addForm)
                }
                temp.then(res => {
                    if (res.code == 200){
                        that.$message({
                            message: '操作成功',
                            type: 'success'
                        })
                        that.$emit('success')
                    }
                })
            })
        }
    }
}
</script>

<style lang="less" scoped>
    @import '../../../style/mixin.less';
</style>